@import '../../styles/variables';
@import '../../styles/colours';
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';

.card-zoom {
    right: 5px;
    top: 45px;
    position: absolute;
    z-index: $layer-top;
    pointer-events: none;

    &.small {
        width: $keyteki-card-width * 3;
        height: $keyteki-card-height * 3;
    }
    &.normal {
        width: $keyteki-card-width * 4;
        height: $keyteki-card-height * 4;
    }
    &.large {
        width: $keyteki-card-width * 5;
        height: $keyteki-card-height * 5;
    }
    &.x-large {
        width: $keyteki-card-width * 6;
        height: $keyteki-card-height * 6;
    }
}

.card-zoomed {
    width: 100%;
    height: 100%;

    img {
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 12px;
        z-index: $layer-top;
    }
}
